/*
* module: @/views/budget/bigOrder/flowMonitor
* author:zengfx
* data:2020-12-4
*/
<template>
  <div class="flowMonitor_container">
    <header>
      <p>流量监控</p>
      <!-- <el-button size="mini" @click="handle_back">返回</el-button> -->
    </header>
    <main>
      <el-form :inline="true" :model="form" class="main_searchBar" ref="form">
        <el-form-item label="区域:">
          <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
        </el-form-item>
        <el-form-item label="日期:">
          <el-date-picker size="mini" v-model="form.date" value-format="yyyyMMdd" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" id="search_btn" @click="handle_search">查询</el-button>
          <el-button size="mini" id="export_btn" @click="handle_export">导出</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-tabs v-model="tabActive" type="card" style="margin-top: 10px;">
          <el-tab-pane label="流量溢出TOP" name="list1"></el-tab-pane>
          <el-tab-pane label="语音溢出TOP" name="list2"></el-tab-pane>
          <el-tab-pane label="短信溢出TOP" name="list3"></el-tab-pane>
        </el-tabs>
        <div>
          <el-table
            :max-height="height+'px'"
            :id="tableId"
            size="mini"
            :header-cell-style="{ background: '#eef1f6' }"
            :data="tableData"
            v-loading="tableLoading"
            style="width: 100%;"
            border
          >
            <el-table-column align="center" label="C4" prop="c4_NAME"></el-table-column>
            <el-table-column align="center" label="C5" prop="c5_NAME"></el-table-column>
            <el-table-column align="center" label="日期" prop="date_CD"></el-table-column>
            <el-table-column align="center" label="号码" prop="acc_NBR"></el-table-column>
            <el-table-column align="center" label="免费资源名称" prop="free_ITEM_NAME"></el-table-column>
            <el-table-column align="center" label="单位" prop="free_RES_UNIT"></el-table-column>
            <el-table-column align="center" label="套餐内资源" prop="free_RES_LIMIT"></el-table-column>
            <el-table-column align="center" label="实际使用" prop="free_RES_USED"></el-table-column>
            <el-table-column align="center" label="溢出量" prop="free_RES_OVER"></el-table-column>
            <el-table-column align="center" label="排名" prop="cnt"></el-table-column>
          </el-table>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { $budgetAPI } from '@/api';
import { setSessionStorage, getSessionStorage, removeSessionStorage } from '@/common/js/storage';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export default {
    data() {
        return {
            form: {
                areaId: '',
                date: ''
            },
            tabActive: 'list1',
            height: '',
            tableData: [],
            tableData1: [],
            tableData2: [],
            tableData3: [],
            tableLoading: false,
            tableId: 'table1',
            accountInfo: null,
            tableName: '流量溢出TOP'
        };
    },
    watch: {
        tabActive: {
            handler(newVal, oldVal) {
                switch (newVal) {
                    case 'list1':
                        this.tableData = this.tableData1;
                        this.tableId = 'table1';
                        this.tableName = '流量溢出TOP';
                        break;
                    case 'list2':
                        this.tableData = this.tableData2;
                        this.tableId = 'table2';
                        this.tableName = '语音溢出TOP';
                        break;
                    case 'list3':
                        this.tableData = this.tableData3;
                        this.tableId = 'table3';
                        this.tableName = '短信溢出TOP';
                        break;
                }
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {
        this.getHeight(); // 获取账户信息
        this.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
        this.form.areaId = this.accountInfo.areaId;
        let list = ['KB', '秒', '条'];
        this.getTableData(list);
    },
    methods: {
        getHeight() {
            this.height = window.innerHeight - this.$refs.form.$el.offsetHeight - 83 - 54 - 51 - 40;
        },
        handle_search() {
            let arr = [];
            switch (this.tabActive) {
                case 'list1':
                    arr = ['KB'];
                    break;
                case 'list2':
                    arr = ['秒'];
                    break;
                case 'list3':
                    arr = ['条'];
                    break;
            }
            this.getTableData(arr, 'search');
        },

        // 导出
        handle_export() {
            let that = this;
            var xlsxParam = {
                raw: true
            };
            let workbook = XLSX.utils.book_new();
            let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#' + this.tableId), xlsxParam);
            XLSX.utils.book_append_sheet(workbook, ws1, this.tableName);
            let wbout = XLSX.write(workbook, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
            });
            try {
                FileSaver.saveAs(
                    new Blob([wbout], {
                        type: 'application/octet-stream'
                    }),
                    '流量监控.xlsx'
                );
            } catch (e) {
                if (typeof console !== 'undefined') console.log(e, wbOut);
            }
            return wbout;
        },
        // 获取日期
        getMonth() {
            return new Promise(resolve => {
                $budgetAPI.incomeKeepRegionalMonth(
                    {
                        maximum: 8
                    },
                    res => {
                        if (res.code == 0) {
                            resolve(res.content);
                        }
                    },
                    err => {
                        console.log(err);
                    }
                );
            });
        },
        async getTableData(arr, type) {
            let params;
            this.tableLoading = true;
            if (!type) {
                this.form.date = await this.getMonth();
             }
            let len = arr.length - 1;
            arr.map((item, index) => {
                params = {
                    AREA_ID: this.form.areaId,
                    flowType: item,
                    DATE_CD: this.form.date
                };
                $budgetAPI.getTrafficMonitoring(
                    params,
                    res => {
                        if (res.code == 0) {
                            if (item == 'KB') {
                                this.tableData1 = res.content.data;
                                this.tableData = res.content.data;
                            } else if (item == '秒') {
                                this.tableData2 = res.content.data;
                                this.tableData = res.content.data;
                            } else {
                                this.tableData3 = res.content.data;
                                this.tableData = res.content.data;
                            }
                            // 初始化赋值
                            if ((index = len && this.tabActive == 'list1')) {
                                this.tableData = this.tableData1;
                            }
                        }
                        this.tableLoading = false;
                    },
                    err => {
                        this.tableLoading = false;
                    }
                );
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.flowMonitor_container {
    .hover {
        cursor: pointer;
        color: #3456dc;
    }
    .num {
        &:hover {
            color: #3456dc;
        }
    }
    & > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        height: 40px;
        margin: 0 -20px;
        padding: 0 20px;
        & > p {
            font-weight: bold;
            font-size: 15px;
        }
    }
    & > main {
        padding: 0 10px 10px;
        .main_searchBar {
            border-bottom: 1px solid #d6d9e5;
            /deep/ .el-form-item {
                margin: 6px 10px 6px 0;
            }
            button {
                color: #fff;
                border: none;
                outline: none;
                &:hover {
                    opacity: 0.8;
                }
            }
            #search_btn {
                background-color: #2a90de;
            }
            #export_btn {
                background-color: #2cd531;
            }
        }
    }
}
</style>